<template>
  <div class="setting-container">
    <div class="app-container">
      <!-- <h2>公司设置</h2> -->
      <el-card v-loading="loading" class="tree-card">
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色管理" name="role">
            <el-button
              type="primary"
              size="medium"
              @click="dialogVisible = true"
            >
              新增角色
            </el-button>
            <el-table :data="tableData" style="width: 100%">
              <!-- el-table 帮我们在内部写好了v-for来遍历输了，所以这里用了 :data -->
              <el-table-column
                type="index"
                :index="indexFn"
                label="序号"
                width="180"
              />
              <el-table-column prop="name" label="名称" width="180" />
              <el-table-column prop="description" label="描述" />
              <el-table-column label="操作">
                <template #default=" { row }">
                  <!-- {{ row }}---{{ column }}---{{ $index }} -->
                  <!-- row：每行数据的信息 -->
                  <!-- column: table-column组件的节点信息-->
                  <!-- $index：索引 -->
                  <el-button
                    type="success"
                    size="medium"
                    @click="clickShowAssignDialog(row.id)"
                  >
                    分配权限
                  </el-button>
                  <el-button
                    type="primary"
                    size="medium"
                    @click="editRoleDetails(row.id)"
                  >
                    编辑
                  </el-button>
                  <el-button type="danger" size="medium" @click="del(row.id)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- <el-pagination
              layout="prev, pager, next"
              :total="50"
              :current-page="page"
              @current-change="currentChange"
            /> -->
            <el-pagination
              :current-page="page"
              :page-sizes="[1, 2, 3, 4]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="currentChange"
            />
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="company">
            <!-- 警告信息 -->
            <el-alert
              title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
              type="info"
              show-icon
              :closable="false"
            />
            <!-- 表单 -->
            <el-form label-width="120px" style="margin-top:50px">
              <el-form-item label="公司名称">
                <el-input
                  v-model="companyForm.name"
                  disabled
                  style="width:400px"
                />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input
                  v-model="companyForm.companyAddress"
                  disabled
                  style="width:400px"
                />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input
                  v-model="companyForm.mailbox"
                  disabled
                  style="width:400px"
                />
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  v-model="companyForm.remarks"
                  type="textarea"
                  :rows="3"
                  disabled
                  style="width:400px"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- 这是弹层窗口 -->
      <el-dialog
        :title="showtitle"
        :visible="dialogVisible"
        @close="closeDialog()"
      >
        <el-form ref="roleForm" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="form.name" placeholder="1-50个字符" />
          </el-form-item>
          <el-form-item label="角色描述" prop="description">
            <el-input v-model="form.description" placeholder="1-50个字符" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button size="medium" @click="closeDialog()">取 消</el-button>
          <el-button size="medium" type="primary" @click="submitRole()">
            确 定
          </el-button>
        </template>
      </el-dialog>
      <!-- 分配权限的弹层 -->
      <el-dialog
        title="分配权限"
        :visible="showAssignDialog"
        @close="closeAssignDialog"
        @open="openAssignDialog"
      >
        <!-- props:建立label和name的关系 -->
        <!-- show-checkbox  显示节点的选择框  -->
        <!-- default-expand-all  是否默认展开所有节点 -->
        <!-- check-strictly 是否解除父子关联，默认是false -->
        <el-tree
          ref="tree"
          node-key="id"
          :data="assignTree"
          show-checkbox
          :props="{ label: 'name' }"
          :default-expand-all="true"
          :check-strictly="true"
        />
        <template #footer>
          <div style="text-align: right;">
            <el-button @click="closeAssignDialog">取消</el-button>
            <el-button type="primary" @click="submitAssign">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getRoleListApi,
  delRoleApi,
  addRoleApi,
  getRoleDetailsApi,
  editRoleDetailsApi,
  assignPermApi
} from '@/api/setting'
import { getcompanyApi } from '@/api/company'
import { mapState } from 'vuex'
import { reqGetPermissionList } from '@/api/permisson'
import { recursionDepartsFn } from '@/utils'

export default {
  data() {
    return {
      loading: false,
      activeName: 'role', // activeName :绑定值，默认展示哪一页
      tableData: [], // 角色列表
      total: 0, // 数据总数  指 在后台数据库里一共有多少条数据匹配
      page: 1, // 当前页数
      pageSize: 2, // 每页的数据条数
      showtitle: '新增角色',
      dialogVisible: false,
      companyForm: {
        name: '',
        companyAddress: '',
        mailbox: '',
        remarks: ''
      },

      // 表单校验的三个条件：form,rules,prop
      form: {
        // form是表单和数据的双向绑定
        name: '',
        description: ''
      },
      rules: {
        // 规则校验
        name: [
          {
            required: true,
            message: '部门名称不能为空',
            trigger: ['blur', 'change']
          }
        ],
        description: [
          {
            required: true,
            message: '部门名称不能为空',
            trigger: ['blur', 'change']
          }
        ]
      },
      showAssignDialog: false, // 控制弹层
      assignTree: [],
      roleId: '' // 点击分配权限存储的角色id
    }
  },
  computed: {
    ...mapState('user', ['userInfo']) // 从vuex的user模块里找到userInfo拿到个人信息里的公司id，用来传给查询企业接口
  },
  created() {
    this.getRoleList()
    this.getcompany()
  },
  methods: {
    // 查询企业 接口
    async getcompany() {
      const { data } = await getcompanyApi(this.userInfo.companyId)
      this.companyForm = data
    },
    // 获取角色列表数据
    async getRoleList() {
      // 调用这个方法的时候触发loading
      this.loading = true // 开启加载

      const {
        data: { rows, total }
      } = await getRoleListApi(this.page, this.pageSize) // 调用接口的时候需要传页码和数据条数
      this.tableData = rows
      this.total = total
      this.loading = false // 接口正常拿到数据之后关闭loading
    },
    // currentPage 页码改变时会触发，（页码改变触发此方法渲染新一页数据）
    // 目标：页码切换渲染新一页数据
    currentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page = val // 当前点击的页码赋值给page（更新当前页）
      this.getRoleList() // 重新获取新的页码数据
    },
    // 每页的数据条数改变会触发此方法
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)// 显示为每页几条数据
      this.pageSize = val // 拿到每页新的数据条数
      this.page = 1 // 重新渲染数据时默认回到第一页
      this.getRoleList() // 重新获取新的页码数据
    },
    indexFn(index) {
      // 返回当前页里数据条数的序号   要看前面有多少条数据
      // 前面一共有多少条数据 = 前面一共有几页*每页的条数
      return index + 1 + (this.page - 1) * this.pageSize
    },
    del(id) {
      this.$confirm('此操作将永久删除该部门, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delRoleApi(id)
          this.$message.success('删除成功')
          // bug1 删除了当前页数据，页码会跳到上一页，并且上一页数据丢失
          // bug2 所有数据只剩下最后一条了，删除后，页码会变成0，所以要加判断
          // 如果仅剩最后一条数据还删除成功了，这个时候应当页面减一
          if (this.tableData.length === 1 && this.page > 1) {
            // 所有数据只剩一条了并且只剩一页了，在进行删除的时候页面减一就会变成第0页
            this.page--
          }

          this.getRoleList() //  重新渲染页面数据
        })
        .catch(() => {
          console.log('点击了取消')
        })
    },
    // 关闭弹层
    closeDialog() {
      this.dialogVisible = false
      // 清空表单的内容（form的值）
      this.form = {
        name: '',
        description: ''
      }
      // resetFields方法 解除表单的红色校验，重置表单状态
      this.$refs.roleForm.resetFields()
    },
    // 发起角色添加的请求
    submitRole() {
      // 拿到表单里的内容，用validate方法校验表单，表单里的内容用flag形参接收一下啊
      this.$refs.roleForm.validate(async flag => {
        if (!flag) return // 如果flag没有通过校验，原地return返回

        // 点击确定的时候你要判断一下form里面有没有id
        if (this.form.id) {
          // 如果是有id说明是编辑，就走编辑角色接口
          await editRoleDetailsApi(this.form)
          this.$message.success('修改角色成功')
        } else {
          // 没有id就是新增角色，走新增角色的接口
          await addRoleApi(this.form) // 如果flag通过校验 就直接走接口
          this.$message.success('添加角色成功')
        }

        this.closeDialog()
        this.getRoleList() // 不管是新增还是编辑，完事都要重新渲染最新数据（因为表格的数据不是实时的）
      })
    },
    // 点击编辑触发此方法,打开编辑窗口，拿到角色id
    async editRoleDetails(id) {
      this.dialogVisible = true
      const { data } = await getRoleDetailsApi(id)
      this.form = data
    },
    // 点击分配权限，触发
    clickShowAssignDialog(id) {
      this.showAssignDialog = true
      this.roleId = id
    },
    closeAssignDialog() {
      this.showAssignDialog = false
    },
    // 打开分配权限触发的方法
    async openAssignDialog() {
      const { data: data1 } = await reqGetPermissionList()
      this.assignTree = recursionDepartsFn(data1, '0') // 处理递归
      // 获取角色详情
      const { data: data2 } = await getRoleDetailsApi(this.roleId)
      // console.log(data2.permIds)

      // 通过key设置选中的节点
      this.$nextTick(() => {
        // $nextTick解决异步事件，让数据实时响应
        this.$refs.tree.setCheckedKeys(data2.permIds)
      })
    },
    // 点击确定提交数据
    async submitAssign() {
      const roleIdsArr = this.$refs.tree.getCheckedKeys()
      // console.log(roleIdsArr)
      await assignPermApi(this.roleId, roleIdsArr)
      this.$message.success('分配权限成功')
      this.closeAssignDialog()
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
</style>
